<template>
  <a-spin :spinning="loading">
    <div class="certificateCA layout-content">
      <template v-if="createdAccount">
        <div class="title" style="margin-bottom: 24px;">
          <a-card>
            <span slot="title">
              <span class="fs-18"
                >{{ user.company.companyName }}企业CA证书
              </span>
              <c-icon type="zhengshu-copy" :size="18"></c-icon>
              <c-button type="link" @click="goToExplainCA">CA证书说明</c-button>
            </span>
          </a-card>
        </div>
        <div class="content">
          <p class="title fs-16">
            <a-icon class="warning" type="question-circle" />
            <span class=""> 如何获取CA证书信息</span>
          </p>
          <VerifyContract />
        </div>
      </template>
      <template v-else-if="!loading">
        <c-button type="link" @click="goToExplainCA">CA证书说明</c-button>
        <div class="unCreateAccount">
          <p>
            <a-alert
              type="warning"
              show-icon
              message="当前企业已完成身份认证流程，但需创建签署账号才能完成CA认证"
            ></a-alert>
          </p>
          <div>
            <c-desc
              class="authInfo"
              :data="authData"
              :column="1"
              :columns="authColumns"
              :labelStyle="{ width: '100px', textAlign: 'right' }"
            >
            </c-desc>
            <p class="tc">
              <c-button
                type="primary"
                :loading="createLoading"
                @click="createAccount"
                >创建签署账号</c-button
              >
            </p>
          </div>
          <p class="info">
            <a-icon type="question-circle" class="warning" />
            CA签署账号，就是企业在聚点商城平台电子签署时用到企业签署账号，主要用于电子合同签署具有法律效应。
          </p>
        </div>
      </template>
    </div>
  </a-spin>
</template>

<script>
import { mapState } from "vuex";
import VerifyContract from "./components/verifyContract";
import {
  getcompanycaauthstate,
  getcompanyinfo,
  createcasignaccount
} from "@/api/ca";

export default {
  components: {
    VerifyContract
  },
  data() {
    return {
      loading: true,
      createdAccount: false,
      authData: {},
      authColumns: [
        {
          label: "企业名称",
          prop: "companyName"
        },
        {
          label: "社会信用代码",
          prop: "organCode"
        },
        {
          label: "法人姓名",
          prop: "legalName"
        },
        {
          label: "法人身份证号",
          prop: "legalIdNo"
        }
      ],
      createLoading: false // 创建签署账号loading
    };
  },
  computed: {
    ...mapState(["user"])
  },
  methods: {
    goToExplainCA() {
      this.$router.push({ name: "explainCA" });
    },
    // 创建签署账号
    createAccount() {
      this.createLoading = true;
      createcasignaccount()
        .then(() => {
          this.createdAccount = true;
        })
        .catch(err => {
          if (
            err.code === this.$globalSite.errorCode.caStateUserError ||
            err.code === this.$globalSite.errorCode.caStateCompanyError
          ) {
            this.$message.error("签署账号创建失败，请重新认证企业", 8);
            this.$router.push({
              name: "activateCompany",
              query: { id: this.user.company.id }
            });
          }
        })
        .finally(() => {
          this.createLoading = false;
        });
    },
    // 获取企业信息
    getCompanyInfo() {
      getcompanyinfo().then(res => {
        this.authData = res;
      });
    },
    // 获取ca认证状态
    init() {
      getcompanycaauthstate()
        .then(() => {
          this.loading = false;
          this.createdAccount = true;
        })
        .catch(err => {
          if (
            err.code === this.$globalSite.errorCode.caStateUserError ||
            err.code === this.$globalSite.errorCode.caStateCompanyError
          ) {
            this.getCompanyInfo();
            this.createdAccount = false;
            this.loading = false;
          }
        });
    }
  },
  created() {
    this.init();
  }
};
</script>

<style lang="scss" scoped>
.certificateCA {
  width: 100%;
  min-height: 400px;
}
.content {
  max-width: 1300px;
  padding: 0 24px;
}
.unCreateAccount {
  width: 500px;
  margin: 0 auto;
  .authInfo {
    width: 350px;
    margin: 40px auto 24px;
  }
}
</style>
